<template>
	<view style="background-color: #f0f2f6">
		<scroll-view scroll-y :style="{height:(height-51)+'px'}">
			<!-- 消息列表页 -->
			<view v-if="TabCur3==0">
				<!-- 搜索框 -->
				<view class="search-input"><label class="iconfont icon-sousuo" />
					<input type="text" confirm-type="search" v-model="search" class="font-size30"
						placeholder="输入你要搜索的内容" />
				</view>
				<!-- 固定模块 -->
				<view style="background-color: #FFFFFF;">
					<!-- 通知公告 -->
					<view class="uni-list-cell uni-list-cell-last" hover-class="uni-list-cell-hover" >
						<view class="cell-navigate">
							<view class="uni-list-data gongao-back">
								<label class="iconfont icon-gonggao icon-label-lin" />
							</view>
							<view class="uni-item-left">
								<view class="color-3A3A3A font-size30">公告</view>
								<!-- <view class="color-9A9A9A font-size24">2024年放假通知</view> -->
							</view>
							<view class="uni-item-right">
								<view class="color-9A9A9A">2025年春节是放假通知</view>
								<view class="height-50">
									<view  class="iconlabel">放假时间2025-01-13~2025-02-17</view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 系统消息 -->
					<view class="uni-list-cell uni-list-cell-last" hover-class="uni-list-cell-hover">
						<view class="cell-navigate">
							<view class="uni-list-data xiaoxi-back">
								<label class="iconfont icon-tongzhi icon-label-lin" />
							</view>
							<view class="uni-item-left">
								<view class="color-3A3A3A font-size30">消息</view>
								<!-- <view class="color-9A9A9A font-size24">账号管理</view> -->
							</view>
							<view class="uni-item-right">
								<view class="color-9A9A9A">新开通账号 上海新梅化工李逵</view>
								<view class="height-50">
									<view  class="iconlabel">有效期 2025/01/01~2025/06/30</view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 系统消息 -->
					<view class="uni-list-cell uni-list-cell-last" hover-class="uni-list-cell-hover">
						<view class="cell-navigate">
							<view class="uni-list-data xiaoxi-back">
								<label class="iconfont icon-tongzhi icon-label-lin" />
							</view>
							<view class="uni-item-left">
								<view class="color-3A3A3A font-size30">消息</view>
								<!-- <view class="color-9A9A9A font-size24">账号管理</view> -->
							</view>
							<view class="uni-item-right">
								<view class="color-9A9A9A">化学楼101 CO2超标,达到1000</view>
								<view class="height-50">
									<view  class="iconlabel">持续时间 2025/01/06 10:00:15~10:03:02</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
				
				<!-- 消息列表 -->
				<view class="message-list" v-if="recentlyList.length">
					<uni-swipe-action>
						<uni-swipe-action-item v-for="(item,index) in recentlyList" :options="options" :key="index"
							:isMargin=false>
							<view class="uni-swipe-action__content " >
								<view class="item no-border-bottom" :class="{'stick' : item.stick}">
									<block v-if="item.type == 1">
										<view class="item-left">
											<view class="avator">
												<view class="iconfont ic_system-news"></view>
											</view>
										</view>
										<view class="item-middle">
											<text class="title">{{item.title}}</text>
											<text class="message">{{item.message}}</text>
										</view>
										<view class="item-right">
											<view class="time">{{item.time}}</view>
											<view class="height-50">
												<view class="mark" v-if="item.count>0">{{item.count}}</view>
											</view>
										</view>
									</block>
									<block v-else>
										<view class="item-left">
											<avator-group :type="item.type" :avator="item.url"></avator-group>
										</view>
										<view class="item-middle">
											<text class="title">{{item.title}}</text>
											<text class="message">{{item.message}}</text>
										</view>
										<view class="item-right">
											<view class="time">{{item.time}}</view>
											<view class="height-50">
												<view class="mark" v-if="item.count>0">{{item.count}}</view>
											</view>
										</view>
									</block>
								</view>
							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>
			</view> 
		</scroll-view>
		<Tabar ref="Tabar"></Tabar>
	</view>
</template>

<script>
	import Tabar from "@/components/Tabar/Tabar.vue"
	import jnpf from '@/common/js/jnpf.js'
	var that;
	export default {
		components: {
			Tabar
		},
		data() {
			return {
				search: '',
				research: '',
				isHide: false,
				sesstion: '0',
				options: [{
						text: '已读',
						style: {
							backgroundColor: '#C7C6CD'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				badge: 0,
				recentlyList:[],
				height: 0,
				isMessage: true,
				isNotice: true,
				tabList3: [{
					name: '消息'
				}, {
					name: '通讯录'
				}],
				TabCur3: 0,
			};
		},
	};
</script>

<style scoped="true" lang="scss">
	.floating-menus {
		position: fixed;
		top: 0;
		right: 20upx;
		z-index: 10;
		opacity: 0;
		transition: all 0.4s;
		height: 0;
		overflow: hidden;
	}

	.uni-input-placeholder {
		color: #9A9A9A;
	}

	.gongao-back {
		background: linear-gradient(-90deg, #FD966F, #FB5E66);
	}

	.xiaoxi-back {
		background: linear-gradient(-90deg, #FFE273, #FFB03A);
	}

	.floating-menus {
		&.show {
			opacity: 1;
			height: auto;
		}

		&.hidden {
			opacity: 0;
			height: 0;
		}
	}

	.search-input {
		background: #FFFFFF;
	}

	.uni-item-right {
		align-items: flex-end;
	}

	.mark {
		background-color: #FE5146;
		line-height: 35upx;
		text-align: center;
		font-size: 18upx;
		min-width: 35upx;
		min-height: 35upx;
		border-radius: 18upx;
		color: #fff;
	}

	.titleImg {
		width: 82upx;
		height: 82upx;
		border-radius: 50%;
	}

	.uni-list-cell {
		background: #FFFFFF;
	}

	.height-50 {
		height: 50rpx;
	}

	/* #ifndef MP */
	.message-list {
		.uni-swipe:last-child .item {
			border-bottom: none;
		}
	}

	/* #endif */

	.uni-swipe-action__content {
		width: 100%;

	}

	.item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 128upx;
		align-items: center;
		background-color: #fff;
		// border-bottom: 1px solid #E6E6E6;
		position: relative;
		padding: 0 28upx;
		border-bottom: 0.5px solid #E3E3E5;

		&::after {
			content: "";
			position: absolute;
			z-index: 3;
			right: 30upx;
			bottom: 0;
			left: 28rpx;
			height: 1px;
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
			background-color: #c8c7cc;
		}

		.item-left {
			display: flex;
			align-items: center;
		}

		&.stick {
			background-color: rgba(243, 236, 221, .5);
		}

		.item-middle {
			display: flex;
			flex: 1;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: flex-start;
			margin-left: 20upx;
			overflow: hidden;

			.title {
				width: 100%;
				color: #000;
				font-family: "微软雅黑";
				font-weight: 400;
				font-size: 28upx;
				height: 50upx;
				line-height: 50upx;
				overflow: hidden;
				/*自动隐藏文字*/
				text-overflow: ellipsis;
				/*文字隐藏后添加省略号*/
				white-space: nowrap;
				/**强制不换行*/
				color: #3A3A3A;
			}

			.message {
				width: 100%;
				font-family: "微软雅黑";
				color: #9A9A9A;
				height: 40upx;
				line-height: 40upx;
				font-size: 24upx;
				overflow: hidden;
				/**自动隐藏文字*/
				text-overflow: ellipsis;
				/**文字隐藏后添加省略号*/
				white-space: nowrap;
				/**强制不换行*/
			}
		}

		.item-right {
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			.time {
				color: #808080;
				font-size: 26upx;
				height: 60upx;
				line-height: 60upx;
			}

			.mark {
				background-color: #FE5146;
				line-height: 35upx;
				text-align: center;
				font-size: 18upx;
				min-width: 35upx;
				min-height: 35upx;
				border-radius: 18upx;
				color: #fff;
				margin-left: 70upx;
			}
		}

		.height-50 {
			height: 50rpx;
		}
	}
</style>
